<template>
    <div class="pop-container-box">
        <div class="group-card-wrapper">
            <div class="card-title">人员过闸信息详情</div>
            <div
                class="close-btn"
                @click="close"></div>

            <div class="card-container">
                <div class="card-list-box">
                    <div class="card-img-box">
                        <div class="card-name">通行照片：</div>
                        <div class="img-box">
                            <img
                                class="pre-img ava-img"
                                :src="item.avatar" />

                            <div
                                class="zoom-btn"
                                @click="preViewImage(item.avatar)"></div>
                        </div>
                    </div>
                    <div class="card-img-box">
                        <div class="card-name">证件照片：</div>
                        <div class="img-box">
                            <img
                                class="pre-img card-img"
                                :src="item.cardImg" />

                            <div
                                class="zoom-btn"
                                @click="preViewImage(item.cardImg)"></div>
                        </div>
                    </div>
                </div>

                <div class="card-table-box">
                    <div class="card-tr-box card-thead-box">
                        <div class="card-str">姓名</div>
                        <div class="card-str">证件类型</div>
                        <div class="card-str">通行点位</div>
                        <div class="card-str">通行时间</div>
                    </div>
                    <div class="card-tr-box">
                        <div
                            class="card-str"
                            v-html="item.name"></div>
                        <div
                            class="card-str"
                            v-html="item.type"></div>
                        <div
                            class="card-str"
                            v-html="item.remark"></div>
                        <div
                            class="card-str"
                            v-html="item.regTime"></div>
                    </div>
                </div>
                <Teleport to="body">
                    <el-image-viewer
                        @close="() => { showViewer = false }"
                        v-if="showViewer"
                        append-to-body="true"
                        :url-list="urlList" />
                </Teleport>
            </div>
        </div>
    </div>
</template>
<script setup>
import useAppStore from '@/store/modules/app';
import { ElImageViewer} from 'element-plus'
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})

const close = inject('close')

const showViewer = ref(false)
const urlList = ref([])

const preViewImage = (url) => {
    urlList.value = [url];
    showViewer.value = true;
}
</script>
<style lang="scss" scoped>
.pop-container-box {
    width: 450px;
    height: 314px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .group-card-wrapper {
        pointer-events: all;
        width: 100%;
        height: 100%;
        position: relative;
        transform: scale(1.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
        padding: 60px 10px 10px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            backdrop-filter: blur(4px);
            z-index: -1;
        }

        .card-title {
            position: absolute;
            top: -4px;
            left: -4px;
            height: 46px;
            width: 100%;
            box-sizing: border-box;
            line-height: 40px;
            padding-left: 48px;
            font-size: 20px;
            color: #fff;
            font-family: PangMenZhengDao;
            background: url(@/assets/images/group_title_bg.png) no-repeat center left/auto 100%;
        }
        .close-btn {
            position: absolute;
            right: 4px;
            top: 4px;
            height: 30px;
            width: 30px;
            cursor: pointer;
            z-index: 3;
            background: url(@/assets/images/close.png) no-repeat center/cover;
        }


        .card-container {
            overflow: auto;
            display: flex;
            flex-direction: column;
            flex: 1;
            position: relative;

            .card-list-box {
                display: flex;
                align-items: center;
                margin-bottom: 30px;
                .card-img-box {
                    display: flex;
                    margin-right: 30px;
                    font-size: 14px;

                    .img-box {
                        width: 112px;
                        height: 150px;
                        position: relative;
                        .pre-img {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            width: 100%;
                            height: 100%;
                            border-radius: 3px;
                        }

                        .zoom-btn {
                            position: absolute;
                            right: 0%;
                            top: 0%;
                            cursor: pointer;
                            width: 20px;
                            height: 20px;
                            background: url(@/assets/images/zoom_icon.png) no-repeat center/cover;
                        }
                    }
                }
            }

            .card-table-box {
                display: flex;
                flex-direction: column;

                .card-tr-box {
                    display: flex;
                    height: 38px;
                    &.card-thead-box {
                        height: 22px;
                        background-color: rgba($color: #fff, $alpha: .15);
                    }

                    .card-str {
                        height: 100%;
                        display: flex;
                        white-space: nowrap;
                        align-items: center;
                        box-sizing: border-box;
                        padding-left: 10px;
                        font-size: 14px;
                        flex-shrink: 0;

                        &:nth-child(1) {
                            width: 60px;
                        }
                        &:nth-child(2) {
                            width: 90px;
                        }
                        &:nth-child(3) {
                            width: 120px;
                        }
                        &:nth-child(4) {
                            width: 120px;
                            flex: 1;
                        }
                    }

                }
            }

        }
    }
}

.pop-header-box {
    background-color: #393A3A;
    position: relative;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;

    .pop-close-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate(0%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        cursor: pointer;

        .close-btn {
            width: 12px;
            height: 12px;
        }
    }
}

.pop-inner-box {
    padding-top: 1px;
    // padding-bottom: 1px;
    position: relative;
    width: 400px;
    max-height: 295px;
    height: auto;
    background-color: rgba($color: #000000, $alpha: .2);
    backdrop-filter: blur(4px);
    overflow-x: hidden;
    overflow-y: auto;

    .song-list-box {
        transition: heaight .3s;

        .song-title-name {
            width: 100%;
            height: 24px;
            background-color: #2a2a2a;
            box-sizing: border-box;
            padding-left: 10px;
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-bottom: 1px;
        }

        .artist-group-box {

            .artist-item-box {
                width: 100%;
                height: 48px;
                background-color: #161514;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 10px;
                margin-bottom: 1px;

                .left-box {
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .artist-img-box {
                        width: 28px;
                        height: 28px;
                        border-radius: 50%;
                        background-color: #AFAFAF;
                        margin-right: 10px;

                        img {
                            border-radius: 50%;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .artist-detail-box {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        font-size: 12px;
                        line-height: 12px;
                        box-sizing: border-box;
                        color: #fff;

                        .artist-num-box {
                            opacity: .5;
                            font-size: 10px;
                        }
                    }
                }

                .right-box {
                    position: relative;
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }
}
</style>
